<template>
  <div class="interfaceMaintainer-distribution">

    <el-dialog title="提示" :visible.sync="dialogVisible" :fullscreen=true @opened="openDialog">
      <template slot="title">
        <div style="font-size: 18px;">
          <span>接口维护人分布</span>

          <el-tooltip class="item" effect="dark" content="按成员分组接口" placement="right-end">
            <i class="el-tooltip el-icon-question item"></i>
          </el-tooltip>
        </div>

      </template>

      <el-row>
        <el-col :span="18">
          <div id="interfaceMaintainerOptions" border :style="{height:'400px',width:'100%'}">
          </div>
        </el-col>

        <el-col :span="6">
          <h4 style="font-size: 15px;">选项</h4>
          <div class="line"></div>
          <el-form ref="form" label-width="80px" label-position='top'>
            <el-form-item label="项目">
              <el-select v-model="value" placeholder="请选择">
                <el-option label="Aitesging" value="12">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="value" placeholder="请选择">
                <el-option label="未完成" :value=0></el-option>
                <el-option label="设计中" :value=1></el-option>
                <el-option label="开发" :value=2></el-option>
                <el-option label="对接" :value=3></el-option>
                <el-option label="测试" :value=4></el-option>
                <el-option label="完成" :value=5></el-option>
                <el-option label="异常" :value=6></el-option>
                <el-option label="维护" :value=7></el-option>
                <el-option label="废弃" :value=8></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="开始时间">
              <el-date-picker v-model="value" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间">
              <el-date-picker v-model="value" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>

          </el-form>

        </el-col>

      </el-row>

    </el-dialog>

  </div>
</template>

<script>
export default {
  data () {
    return {
      dialogVisible: false,
      value: '',

      interfaceMaintainterOptions: {
        "color": [
          "#56abfb",
          "#73d897",

        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        label: {
          show: true,
          position: 'top', //在上方显示
          textStyle: { //数值样式
            "fontSize": '24px',
            "color": '#34A1D6',
            "fontFamily": '宋体'
          }
        },
        legend: {
          data: ['接口数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }

          }
        },

        xAxis: [
          {
            type: 'category',
            data: ['小明', '小华', '小红', '小江', '小徐', '小曹']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '接口数',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: [234, 460, 634, 460, 534, 460]
          },
        ]
      },

    }
  },

  methods: {

    openDialog () {
      this.interfaceMaintainterDistrobution()


    },

    interfaceMaintainterDistrobution () {
      let myCharts = this.$echarts.init(document.getElementById("interfaceMaintainerOptions"))
      myCharts.setOption(this.interfaceMaintainterOptions)
    }
  }


}
</script>

<style scoped>
.interfaceMaintainer-distribution .line {
  border-bottom: 1px solid #eee;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
  margin-top: 5px;
  margin-bottom: 10px;
}

.interfaceMaintainer-distribution >>> .el-select {
  display: contents;
}

.interfaceMaintainer-distribution .el-date-editor {
  width: 100%;
}
</style>